<div class="flex flex-col">
  <app-browse-navigation
    [browsePayload]="browsePayload$"
  ></app-browse-navigation>
  <div
    *ngIf="browsePayload$ | async as browsePayload"
    class="flex flex-col md:flex-row md:flex-wrap md:gap-x-4 md:gap-y-12"
  >
    <!-- playlists -->
    <app-playlists
      [playlists]="browsePayload.playlists"
      *ngIf="browsePayload.playlists.length > 0"
      class="flex-grow basis-1/3"
    ></app-playlists>

    <!-- directories -->
    <app-directories
      [directories]="browsePayload.directories"
      [dirQp]="dirQp"
      *ngIf="browsePayload.directories.length > 0"
      class="flex-grow basis-1/3"
    ></app-directories>

    <!-- tracks -->
    <app-tracks
      [tracks]="browsePayload.tracks"
      *ngIf="browsePayload.tracks.length > 0"
      class="flex-grow basis-1/3"
    ></app-tracks>
  </div>
</div>
